/**
 * 通用JavaScript工具函数和API调用
 */

// API基础配置
const API_BASE_URL = '/api';

// API客户端将在api-client.js中定义

// 通用工具函数
const Utils = {
    /**
     * 格式化日期时间
     * @param {string|Date} dateTime - 日期时间
     * @returns {string} 格式化后的日期时间字符串
     */
    formatDateTime(dateTime) {
        if (!dateTime) return '-';
        const date = new Date(dateTime);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
    },

    /**
     * 格式化日期
     * @param {string|Date} date - 日期
     * @returns {string} 格式化后的日期字符串
     */
    formatDate(date) {
        if (!date) return '-';
        return new Date(date).toLocaleDateString('zh-CN');
    },

    /**
     * 格式化数字
     * @param {number} num - 数字
     * @returns {string} 格式化后的数字字符串
     */
    formatNumber(num) {
        return num ? num.toLocaleString() : '0';
    },

    /**
     * 截断文本
     * @param {string} text - 文本
     * @param {number} maxLength - 最大长度
     * @returns {string} 截断后的文本
     */
    truncateText(text, maxLength = 50) {
        if (!text) return '';
        return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
    },

    /**
     * 获取状态徽章HTML
     * @param {string} status - 状态
     * @returns {string} 徽章HTML
     */
    getStatusBadge(status) {
        const statusMap = {
            'ACTIVE': '<span class="badge badge-success">活跃</span>',
            'DISABLED': '<span class="badge badge-danger">禁用</span>',
            'EXPIRED': '<span class="badge badge-warning">过期</span>'
        };
        return statusMap[status] || '<span class="badge badge-secondary">未知</span>';
    },

    /**
     * 获取权限类型名称
     * @param {string} permissionType - 权限类型
     * @returns {string} 权限类型名称
     */
    getPermissionTypeName(permissionType) {
        const typeMap = {
            'FULL_ACCESS': '完全访问',
            'READ_ONLY': '只读',
            'WRITE_ONLY': '只写',
            'CUSTOM': '自定义'
        };
        return typeMap[permissionType] || '未知';
    },

    /**
     * 获取操作类型名称
     * @param {string} operationType - 操作类型
     * @returns {string} 操作类型名称
     */
    getOperationTypeName(operationType) {
        const typeMap = {
            'CREATE': '创建',
            'UPDATE': '更新',
            'DELETE': '删除',
            'ENABLE': '启用',
            'DISABLE': '禁用'
        };
        return typeMap[operationType] || '未知';
    },

    /**
     * 获取操作图标
     * @param {string} operationType - 操作类型
     * @returns {string} 图标类名
     */
    getOperationIcon(operationType) {
        const iconMap = {
            'CREATE': 'fas fa-plus',
            'UPDATE': 'fas fa-edit',
            'DELETE': 'fas fa-trash',
            'ENABLE': 'fas fa-check',
            'DISABLE': 'fas fa-times'
        };
        return iconMap[operationType] || 'fas fa-question';
    },

    /**
     * 显示成功消息
     * @param {string} message - 消息内容
     */
    showSuccess(message) {
        this.showAlert(message, 'success');
    },

    /**
     * 显示错误消息
     * @param {string} message - 消息内容
     */
    showError(message) {
        this.showAlert(message, 'error');
    },

    /**
     * 显示警告消息
     * @param {string} message - 消息内容
     */
    showWarning(message) {
        this.showAlert(message, 'warning');
    },

    /**
     * 显示信息消息
     * @param {string} message - 消息内容
     */
    showInfo(message) {
        this.showAlert(message, 'info');
    },

    /**
     * 显示通用提示消息
     * @param {string} message - 消息内容
     * @param {string} type - 消息类型
     */
    showAlert(message, type = 'info') {
        // 创建提示元素
        const alert = document.createElement('div');
        alert.className = `alert alert-${type}`;
        alert.innerHTML = `
            <span>${message}</span>
            <button type="button" class="alert-close" onclick="this.parentElement.remove()">×</button>
        `;

        // 添加到页面
        const container = document.querySelector('.alert-container') || document.body;
        container.appendChild(alert);

        // 自动移除
        setTimeout(() => {
            if (alert.parentElement) {
                alert.remove();
            }
        }, 5000);
    },

    /**
     * 确认对话框
     * @param {string} message - 确认消息
     * @returns {boolean} 用户确认结果
     */
    confirm(message) {
        return confirm(message);
    },

    /**
     * 复制到剪贴板
     * @param {string} text - 要复制的文本
     * @returns {Promise<boolean>} 复制是否成功
     */
    async copyToClipboard(text) {
        try {
            if (navigator.clipboard) {
                await navigator.clipboard.writeText(text);
                this.showSuccess('已复制到剪贴板');
                return true;
            } else {
                // 降级方案
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                this.showSuccess('已复制到剪贴板');
                return true;
            }
        } catch (error) {
            console.error('复制失败:', error);
            this.showError('复制失败');
            return false;
        }
    },

    /**
     * 防抖函数
     * @param {Function} func - 要防抖的函数
     * @param {number} wait - 等待时间（毫秒）
     * @returns {Function} 防抖后的函数
     */
    debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
};

// 模态框管理
const Modal = {
    /**
     * 显示模态框
     * @param {string} modalId - 模态框ID
     */
    show(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.style.display = 'block';
        }
    },

    /**
     * 隐藏模态框
     * @param {string} modalId - 模态框ID
     */
    hide(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.style.display = 'none';
        }
    },

    /**
     * 初始化模态框事件
     */
    init() {
        // 点击关闭按钮关闭模态框
        document.querySelectorAll('.modal-close').forEach(closeBtn => {
            closeBtn.addEventListener('click', function () {
                const modal = this.closest('.modal');
                if (modal) {
                    modal.style.display = 'none';
                }
            });
        });

        // 点击模态框外部关闭
        window.addEventListener('click', function (event) {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        });
    }
};

// 分页组件
const Pagination = {
    /**
     * 渲染分页组件
     * @param {Object} pageInfo - 分页信息
     * @param {Function} onPageChange - 页面变化回调
     * @param {string} containerId - 容器ID
     */
    render(pageInfo, onPageChange, containerId) {
        const container = document.getElementById(containerId);
        if (!container || !pageInfo) return;

        const {currentPage, totalPages, totalElements, size} = pageInfo;

        let html = '<div class="pagination-container">';
        html += `<div class="pagination-info">共 ${totalElements} 条记录，每页 ${size} 条</div>`;
        html += '<div class="pagination">';

        // 上一页
        if (currentPage > 0) {
            html += `<button class="page-btn" onclick="${onPageChange.name}(${currentPage - 1})">上一页</button>`;
        }

        // 页码
        const startPage = Math.max(0, currentPage - 2);
        const endPage = Math.min(totalPages - 1, currentPage + 2);

        for (let i = startPage; i <= endPage; i++) {
            const active = i === currentPage ? 'active' : '';
            html += `<button class="page-btn ${active}" onclick="${onPageChange.name}(${i})">${i + 1}</button>`;
        }

        // 下一页
        if (currentPage < totalPages - 1) {
            html += `<button class="page-btn" onclick="${onPageChange.name}(${currentPage + 1})">下一页</button>`;
        }

        html += '</div></div>';
        container.innerHTML = html;
    }
};

// 表格组件
const Table = {
    /**
     * 渲染表格
     * @param {Array} data - 数据数组
     * @param {Array} columns - 列配置
     * @param {string} containerId - 容器ID
     */
    render(data, columns, containerId) {
        const container = document.getElementById(containerId);
        if (!container) return;

        let html = '<table class="table">';

        // 表头
        html += '<thead><tr>';
        columns.forEach(col => {
            html += `<th>${col.title}</th>`;
        });
        html += '</tr></thead>';

        // 表体
        html += '<tbody>';
        if (data && data.length > 0) {
            data.forEach(row => {
                html += '<tr>';
                columns.forEach(col => {
                    const value = col.render ? col.render(row[col.key], row) : row[col.key];
                    html += `<td>${value || '-'}</td>`;
                });
                html += '</tr>';
            });
        } else {
            html += `<tr><td colspan="${columns.length}" class="text-center">暂无数据</td></tr>`;
        }
        html += '</tbody></table>';

        container.innerHTML = html;
    }
};

// 页面初始化
document.addEventListener('DOMContentLoaded', () => {
    // 初始化模态框
    Modal.init();

    // 初始化工具提示
    const tooltips = document.querySelectorAll('[data-tooltip]');
    tooltips.forEach(element => {
        element.addEventListener('mouseenter', function () {
            const tooltip = document.createElement('div');
            tooltip.className = 'tooltip';
            tooltip.textContent = this.getAttribute('data-tooltip');
            document.body.appendChild(tooltip);

            const rect = this.getBoundingClientRect();
            tooltip.style.left = rect.left + 'px';
            tooltip.style.top = (rect.top - tooltip.offsetHeight - 5) + 'px';

            this._tooltip = tooltip;
        });

        element.addEventListener('mouseleave', function () {
            if (this._tooltip) {
                this._tooltip.remove();
                this._tooltip = null;
            }
        });
    });
});